﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index1.aspx.cs" Inherits="SEPAIWebsite.index" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html ng-app="sepai">
<head runat="server">
    <title>SEPAI</title>
    <link rel="SHORTCUT ICON" type="image/ico" href="./Favicon.ico" />
    <link href="CSS/timeline.css" rel="stylesheet" type="text/css" media="all" />
    <script src="JS/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="JS/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="JS/angular.min.js" type="text/javascript"></script>
    <script src="JS/angular-animate.min.js" type="text/javascript"></script>
    <script src="JS/controllers/controller.js" type="text/javascript"></script>
    <script src="JS/timeline.js" type="text/javascript"></script>
    <%-- <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-80543820-1', 'auto');
        ga('send', 'pageview');

    </script>--%>
</head>
<body onload="window.scrollTo(0, 100);" ng-controller="DramaController as dc">
    <form id="form1" runat="server">
        <div dir="rtl" aria-autocomplete="none" style="clear: both">
            <div id="DivLogin&Register" class="LoginCss">
                <div id="DivLoginRegister" runat="server" visible="true" style="float: right; clear: both">
                    <table style="width: 125px">
                        <tr>
                            <td valign="top">
                                <a href="UserManagement/SignUp.aspx" runat="server" style="text-decoration: none; font-size: 13px; color: #ffad54; outline: none">SignUp</a>
                            </td>
                            <td valign="top">
                                <a href="LoginProcess/Login.aspx" runat="server" style="text-decoration: none; font-size: 13px; color: #ffad54; outline: none">Login</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="DivLogout" runat="server" visible="false" style="float: right; margin-right: 5px; clear: both">
                    <div id="DivUserBox" dir="ltr" style="float: left; padding: 5px 0 0 0">
                        <a id="UserWelcomeMessage" runat="server" style="font-size: 13px; color: #F2F2F2;"></a>
                    </div>
                    <div style="float: left">
                        <div id="LogoutMenu">
                            <ul>
                                <li class='active has-sub'><a>
                                    <img src="../IMAGES/UserIcon.png" style="width: 18px; height: 18px" /></a>
                                    <ul>
                                        <li><a id="MyProfileIcon" href="../UserManagement/MyDashboard.aspx" runat="server"
                                            causesvalidation="false">My Dashboard</a></li>
                                        <li><a id="btnLogoutIcon" runat="server" causesvalidation="false" onserverclick="btnLogout_Click">Logout</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
            <br class="clear" />
        </div>
        <div class="background"></div>
        <div class="logo"></div>
        <div>
            <ul class="tl-main">
                <li class="blank top"></li>
                <li ng-repeat="drama in dc.drama" ng-class="{ focus : drama.focus == 'true', min: drama.upcoming == 'true' , mark: drama.mark == 'true'}">
                    <div class="gen-date upcoming" ng-show="drama.upcoming == 'true'">
                        Upcoming
                    </div>

                    <div class="gen-date" ng-show="drama.upcoming != 'true'">
                        <div>
                            <span class="day">
                                <label ng-repeat="dat in drama.dates.date | limitTo:1" bn-repeat-delimiter=",">{{ dat.d |  date:'dd' }}</label></span>
                            <span class="month">
                                <label ng-repeat="dat in drama.dates.date | limitTo:1" bn-repeat-delimiter=",">{{ dat.d |  date:'MMMM' }}</label></span>
                            <span class="year">
                                <label ng-repeat="dat in drama.dates.date | limitTo:1" bn-repeat-delimiter=",">{{ dat.d |  date:'yyyy' }}</label></span>
                        </div>
                    </div>

                    <div class="countdown" ng-show="drama.focus == 'true'" ng-repeat="dat in drama.dates.date | limitTo:1">
                        <div class="timeleft">{{ timeLeft(dat.d) }}</div>
                        to go
                    </div>

                    <a class="disp-img" ng-click="" view-individual="true" data-target="#drama{{ $index }}">
                        <img src="IMAGES/Drama/{{ drama.displayImage }}" alt="..." /></a>

                    <div class="focus-desc" ng-show="drama.focus == 'true'">
                        <div class="desc-1">
                            <h3>{{ drama.name }}</h3>
                            <div class="creator">
                                <span>Director </span>{{ drama.creator.director }}
                            </div>
                            <div class="creator">
                                <span>Playwright </span>{{ drama.creator.playwright }}
                            </div>
                            <p>{{ drama.summary }}</p>
                            <a class="dot-link E38E3E" read-more="true"><i></i><i></i><i></i><i></i><i></i></a>
                            <p class="date-time">
                                <span ng-repeat="dat in drama.dates.date">
                                    <span class="colorE38E3E" ng-hide="{{ $index == 0 }}">and</span>
                                    {{ dat.d |  date:'dd' }}th {{ dat.d |  date:'MMMM' }},
                                    <span class="colorE38E3E" ng-repeat="time in dat.t">
                                        <span class="colorE38E3E" ng-hide="{{ $index == 0 }}">&</span>
                                        {{ time }}
                                    </span>
                                </span>,
                                <span ng-repeat="dat in drama.dates.date" ng-show="$last">{{ dat.d | date:'yyyy' }}</span>
                                <span class="colorE38E3E">at</span>
                                {{ drama.venue }}
                            </p>
                        </div>
                        <div class="desc-2">
                            <div class="behindsc-wrap">
                                <h3>Behind the Scenes</h3>
                                <p>{{ drama.behindscenes.summary }}</p>
                                <a class="dot-link E38E3E"><i></i><i></i><i></i><i></i><i></i></a>
                                <a target="_blank" ng-show="drama.tickets.available == 'true'" href="{{drama.tickets.link}}">Tickets available here</a>
                            </div>
                        </div>
                    </div>

                    <div class="short-desc">
                        <h4>{{ drama.name }}</h4>
                        <p>{{ drama.summary }}</p>
                        <a class="dot-link"><i></i><i></i><i></i><i></i><i></i></a>
                    </div>
                </li>
                <li class="blank bottom"></li>
            </ul>
        </div>
        <div class="menu">
            <div class="arrow"></div>
            <ul>
                <li>
                    <h3>About SEPAI</h3>
                    <div class="content">
                        <p>
                            <span class="font-16">SEPAI</span> stands for <span class="colorE38E3E font-20">S</span>ociety for <span class="colorE38E3E font-20">E</span>nergizing <span class="colorE38E3E font-20">P</span>erforming <span class="colorE38E3E font-20">A</span>rts among every <span class="colorE38E3E font-20">I</span>ndian. 
                            We are a registered group in Bangalore under the <span class="font-16">Karnataka Society Registration Act</span> (1960) and working actively since <span>February 2014</span>. 
                        </p>
                        <p>
                            The founders of the society has been working towards a goal of promoting performing arts among Indians and encouraging the common man to participate in them, for more than two decades.
                            We intend to provide a platform for all, starting from the person with a day job to a full time performing artist, for cultivating their talents and interests.
                        </p>
                    </div>
                </li>
                <li>
                    <h3>Mission and Vision</h3>
                    <div class="content">
                        <p>The dwindling quality and interest in performing arts, like theater, due to increasing prominence of the commercial entertainment industry and changing lifestyle is one of the main motivating factors that has led to the formation of this society. We have made our missions aligned with the belief that culture thrives from common citizens. It should be them who should be taught and encouraged to participate. We intend to make them discover the beauty of traditional performing arts.</p>
                        <div class="margintop-10">Missions:</div>
                        <ul class="list-interior">
                            <li>Promote cultural awareness among common people</li>
                            <li>Expose more people to Indian Performing Arts</li>
                            <li>Encourage everyone to actively participate in Performing Arts</li>
                        </ul>
                    </div>
                </li>
                <li>
                    <h3>Be Our Friend</h3>
                    <div class="content">
                        <p>
                            We welcome everyone who are interested to be a part of SEPAI as an artist, a volunteer, a supporter or a patron.
                            If you or your organization needs our support to organize your events or if you want to jointly organize events, 
                            please write to us or contact us. We would be glad to address your ideas.
                        </p>
                    </div>
                </li>
                <li>
                    <h3>Write to Us</h3>
                    <div>
                        <div class="col35">
                            <input id="txtUserName" runat="server" class="InputTextCss" type="text" placeholder="Name" style="height: 25px" /><asp:RequiredFieldValidator ID="rquvUserName" runat="server" ErrorMessage="RequiredFieldValidator"
                                ControlToValidate="txtUserName" ForeColor="Red">*</asp:RequiredFieldValidator>
                            <br />
                            <asp:RegularExpressionValidator ID="revEmailID" runat="server" ForeColor="Red" ControlToValidate="txtEmailId"
                                ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">Enter a valid email id</asp:RegularExpressionValidator>
                            <input id="txtEmailId" runat="server" class="InputTextCss" type="text" placeholder="Email" style="height: 25px" /><asp:RequiredFieldValidator ID="rqvEmail" runat="server" ErrorMessage="RequiredFieldValidator"
                                ControlToValidate="txtEmailId" ForeColor="Red">*</asp:RequiredFieldValidator>
                        </div>
                        <div class="col65">
                            <textarea id="txtMessage" runat="server" class="InputTextCss" placeholder="Write to us"></textarea>
                        </div>
                        <div class="col10">
                            <input type="submit" runat="server" value="Send" onserverclick="Submit_Click" />
                        </div>
                    </div>
                </li>
            </ul>
            <div class="ico-links-container">
                <a id="btnContactUs" runat="server" class="ico-links contact"></a>
                <a class="ico-links facebook"></a>
            </div>
        </div>
        <div class="expanded-view" id="expanded-view">
            <div class="dark-overlay"></div>
            <div class="audience"></div>
            <img class="curtain" src="IMAGES/curtain.png" />
            <div class="close-container-fixed"><a class="close" data-target="expanded-view" close-target="true"></a></div>
            <div class="mini-menu">
                <a ng-repeat="drama in dc.drama" data-target="#drama{{ $index }}" ng-class="{ active : $index == 0}" minimenu-control="true">
                    <label>{{ drama.name }}</label>
                </a>
            </div>
            <div class="expanded-item-container">
                <!-- Expanded Item -->
                <div ng-repeat="drama in dc.drama" id="drama{{ $index }}" ng-class="{ active : $index == 0}" class="expanded-item">
                    <div class="carousal" carousal="true">
                        <div class="carousal-image-container">
                            <img ng-repeat="image in drama.carousal" src="IMAGES/Drama/{{ image }}" ng-class="{ active : $index == 0}" />
                        </div>
                        <div class="carousal-controller">
                            <a ng-repeat="image in drama.carousal" ng-class="{ active : $index == 0}" carousal-controller="true"></a>
                        </div>
                        <div class="written-content">
                            <div class="desc-1">
                                <h1>{{ drama.name }}</h1>
                                <div class="creator">
                                    <span>Director </span>{{ drama.creator.director }}
                                </div>
                                <div class="creator">
                                    <span>Playwright </span>{{ drama.creator.playwright }}
                                </div>
                                <p class="summary">{{ drama.summary }}</p>
                                <!--<p class="summary" ng-bind-html='drama.summary' />-->
                                <a class="dot-link E38E3E" read-more="true"><i></i><i></i><i></i><i></i><i></i></a>
                                <p class="date-time" ng-hide="drama.upcoming=='true'">
                                    <span ng-repeat="dat in drama.dates.date">
                                        <span class="colorE38E3E" ng-hide="{{ $index == 0 }}">and</span>
                                        {{ dat.d |  date:'dd' }}th {{ dat.d |  date:'MMMM' }},
                                        <span class="colorE38E3E" ng-repeat="time in dat.t">
                                            <span class="colorE38E3E" ng-hide="{{ $index == 0 }}">&</span>
                                            {{ time }}
                                        </span>
                                    </span>,
                                    <span ng-repeat="dat in drama.dates.date" ng-show="$last">{{ dat.d | date:'yyyy' }}</span>
                                    <span class="colorE38E3E">at</span>
                                    {{ drama.venue }}
                                </p>
                            </div>
                            <div class="desc-2">
                                <div class="behindsc-wrap" ng-hide="drama.upcoming=='true'">
                                    <h3>Behind the Scenes</h3>
                                    <p>{{ drama.behindscenes.summary }}</p>
                                    <a class="dot-link E38E3E" drama-details="true"><i></i><i></i><i></i><i></i><i></i></a>
                                </div>
                                <a target="_blank" ng-show="drama.tickets.available == 'true'" href="{{drama.tickets.link}}" read-more="true">Tickets available here</a>
                            </div>
                        </div>
                    </div>
                    <div class="behind-the-scenes">
                        <h1>{{ drama.name }}</h1>
                        <a class="back" back-details="true">&lt;Go back to <span class="colorE38E3E">Drama Details</span></a>
                        <h2>Behind the Scenes</h2>
                        <div class="list-container">
                            <ul>
                                <li class="head">Cast</li>
                                <li ng-repeat="p in drama.behindscenes.cast">
                                    <a>
                                        <img src="IMAGES/{{ p.photo }}" /></a>
                                    <span>{{ p.name }}</span>
                                </li>
                            </ul>
                            <ul>
                                <li class="head">Music</li>
                                <li ng-repeat="p in drama.behindscenes.music">
                                    <a>
                                        <img src="IMAGES/{{ p.photo }}" /></a>
                                    <span>{{ p.name }}</span>
                                </li>
                            </ul>
                            <ul>
                                <li class="head">Make Up</li>
                                <li ng-repeat="p in drama.behindscenes.makeup">
                                    <a>
                                        <img src="IMAGES/{{ p.photo }}" /></a>
                                    <span>{{ p.name }}</span>
                                </li>
                            </ul>
                            <ul>
                                <li class="head">Light and Sound</li>
                                <li ng-repeat="p in drama.behindscenes.lightSound">
                                    <a>
                                        <img src="IMAGES/{{ p.photo }}" /></a>
                                    <span>{{ p.name }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Expanded Item -->
        </div>
        <div class="round-overlay" style=""></div>
        <a class="menu-trigger"><span></span><span></span><span></span></a>
        <asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
        <asp:ModalPopupExtender ID="ContactUsModalPopupExtender" runat="server" TargetControlID="btnShowPopup"
            PopupControlID="PnlWriteUs" BackgroundCssClass="modalBackground">
        </asp:ModalPopupExtender>
        <asp:Panel ID="PnlWriteUs" runat="server" Style="display: none; min-width: 550px; max-width: 965px; padding: 0px; text-align: center"
            CssClass="modalPopup">
            <div class="PopupHeaderStyle">
                <div style="float: left; font-size: 18px; font-weight: 700; color: #F2F2F2; padding-left: 5px">
                    Write to Us...
                </div>
                <div class="Clear">
                </div>
            </div>
            <div style="margin: 25px 15px;">
                <a style="font-size: 32px; font-weight: 700; color: #101010">Thanks!</a>
                <br />
                <a style="font-size: 18px; font-weight: 700; color: #101010">We appreciate that you’ve
                taken the time to write us.</a>
                <br />
                <br />
                <button type="button" id="btnFeedbackSuccessMessage" class="UniversalButton" causesvalidation="false"
                    runat="server" onserverclick="btnFeedbackSuccessMessage_Click">
                    OK</button>
            </div>
        </asp:Panel>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <asp:ModalPopupExtender ID="NewsletterSubscriptionModalPopupExtender" runat="server" TargetControlID="btnContactUs" CancelControlID="btnRemove"
            PopupControlID="PnlContactUs" BackgroundCssClass="modalBackground">
        </asp:ModalPopupExtender>
        <asp:Panel ID="PnlContactUs" runat="server" Style="display: none;width:635px;padding: 0px; text-align: center"
            CssClass="modalPopup">
            <div class="PopupHeaderStyle">
                <div style="float: left; font-size: 18px; font-weight: 700; color: #F2F2F2; padding: 5px 5px">
                    Contact Us...
                </div>
                <div style="text-align: right; font-size: 14px; font-weight: 700; padding-top: 5px"><a id="btnRemove">X</a></div>
                <div class="Clear">
                </div>
            </div>
            <div style="margin: 25px 13px; text-align:center">
                <p style="font-size:14px;font-weight:600;color: #101010;line-height: 25px">
                    For Inquiries: Email us at <a href="#" style="font-size:13px;">info@sepai.com.</a>
                    For Support: Email us at <a href="#" style="font-size:13px">support@sepai.com</a>
                    If you have any queries or requests, please subscribe it in the below form.<br />
                    Someone from our team will get in touch with you.
                </p>
                <br />
                <div class="SubscriptionBox">
                    <input id="txtSubscription" runat="server" type="text" placeholder="Please enter your email id"
                        style="width: 265px; height: 20px; margin-left: 14px; border: none; padding: 5px; outline: none" />
                    <button id="btnSubscriptiom" type="button" runat="server" causesvalidation="false"
                        onserverclick="btnSubscriptionSubmit_Click">
                        Submit</button>
                </div>
                <br />
            </div>
        </asp:Panel>
        <asp:ModalPopupExtender ID="SubscriptionModalPopupExtender" runat="server" TargetControlID="btnShowPopup"
        PopupControlID="pnlpopup" BackgroundCssClass="modalBackground">
    </asp:ModalPopupExtender>
    <asp:Panel ID="pnlpopup" runat="server" Style="display: none; min-width: 550px; max-width: 965px;
        padding: 0px; text-align: center" CssClass="modalPopup">
        <div class="PopupHeaderStyle">
            <div style="float: left; font-size: 18px; font-weight: 600; color: #F2F2F2; padding-left: 5px">
                Subscription</div>
            <div class="Clear">
            </div>
        </div>
        <div style="margin: 20px 50px">
            <div id="DivSubscriptionEmailSuccessMessage" runat="server" visible="true">
                <a style="font-size: 20px; font-weight: 600; color: #808080">Thanks for subscribing
                    to our newsletter.<br />
                    We will keep you posted on our latest updates.</a>
                <br />
                <br />
                <button type="button" id="btnSubscriptionConfirmationOk" class="UniversalButton"
                    causesvalidation="false" runat="server" onserverclick="btnSubscriptionConfirmationOk_Click">
                    OK</button>
            </div>
            <div id="DivSubscriptionEmailValidationErrorMessage" runat="server" visible="false">
                <a style="font-size: 20px; font-weight: 600; color: #808080">Please enter a vaild email
                    id for newsletter subscription.</a>
                <br />
                <br />
                <button type="button" id="btnSubscriptionError" class="UniversalButton" runat="server"
                    causesvalidation="false" onserverclick="btnSubscriptionError_Click">
                    OK</button>
            </div>
            <div id="DivSubscriptionEmailDuplicateMessage" runat="server" visible="false">
                <a style="font-size: 20px; font-weight: 600; color: #808080">Your email id with us,we
                    will get back you soon.</a>
                <br />
                <br />
                <button type="button" id="btnSubscriptionConfirmation" class="UniversalButton" runat="server"
                    causesvalidation="false" onserverclick="btnSubscriptionConfirmationOk_Click">
                    OK</button>
            </div>
        </div>
    </asp:Panel>
    </form>
</body>
</html>
